<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>不同类型的数据监控</h4>
        <p>username:{{ username }}</p>
        <input type="text" v-model="username">
        <br>
        <br>
        <p>user:{{ user }}</p>
        <input type="text" v-model="user.name">
        <input type="text" v-model="user.age">
        <input type="button" value="重新为user赋值" @click="setUser()">
        <br>
        <br>
        <p>arr:{{ arr }}</p>
        <input type="text" v-model="arr[0]">
        <input type="button" value="重新为arr赋值" @click=" arr=[7,8,9] ">
        <br>
        <br>
        <p>obj:{{ obj }}</p>
        <input type="text" v-model="obj.a">
        <br>
        <br>
        <p>info:{{ info }}</p>
        <input type="text" v-model="info">
    </div>
</body>
<script>
    /*
    - 实例内构建方式：
        new Vue({
            watch: {
                key:value
            }
        })
    - key（string）：被监视的数据变量名称或对象路径表示方式
        - 监视在vue设定中，是为一个已知的数据仓库变量进行 监控方法的定义
        - !注意! : 对象路径表示形式只能用于Vue的监视器定义时
        - 监视器方法默认主要用于监视变量的 栈中值的变化，所以对引用类型数据的内容修改
            在默认情况下是不会触发监视器，此时回调结果的参数 newValue 和 oldValue以
            引用串值的方式获取参数，所以对于引用数据而言 nv===ov

    - value（Function|Object|Array）: 定义监视器执行方式
        - 取值 Function(newValue,oldValue) : 定义基础的数据监控方法
            + newValue 当前方法被触发时，发生变量的变化的新数据
            + newValue 当前方法被触发时，发生变量的变化的旧数据

        - 取值 Object : 定义可扩展数据监控配置
            {
                handler: Function 定义监控方法
                deep: Boolean 是否开启深度监视 - 对于引用类型数据不仅监控该变量的地址变化，通过监控堆中数据变化
                immediate: Boolean 是否开启初始化触发
            }
    - 监视器中定义的监视回调方法 this 被vue锁定在当前vue实例对象上的
    
    */
    let vm = new Vue({
        el:"#app",
        data:{
            username:"tom",
            user:{
                name:"jack",
                age:23
            },
            arr:[1,2,3,4,5],
            obj:{
                a:"aaa",
                b:"bbb"
            },
            info:"多回调"
        },
        watch:{
            username(nv,ov){
                console.group("username : ======>");
                console.log("新值：",nv);
                console.log("旧值：",ov);
                console.groupEnd();
            },
            // 只能监控到 user 地址变化
            user(nv,ov){
                console.group("user : ======>");
                console.log("新值：",nv);
                console.log("旧值：",ov);
                console.groupEnd();
            },
            // 对象路径取值表达式 - vue的监视器可以通过该方法识别到需要监控数据变量
            //      上述描述的功能 仅在vue的watch监视器语法中有效
            "user.name":function(nv,ov){
                console.group("user.name : ======>");
                console.log("新值：",nv);
                console.log("旧值：",ov);
                console.groupEnd();
            },
            // 默认开启数组的深度监控 deep:true
            arr(nv,ov){
                console.group("arr : ======>");
                console.log("新值：",nv);
                console.log("旧值：",ov);
                console.groupEnd();
            },
            // 取值 Object 表示已开启监控器的额外监控配置
            obj:{
                handler: function(nv,ov){
                    console.group("obj : ======>");
                    console.log("新值：",nv);
                    console.log("旧值：",ov);
                    console.groupEnd();
                },
                deep:true,
                immediate:true
            },
            // 将info监控功能已多个回调方式进行描述
            info:[
                function(nv,ov){
                    console.log("info监控器方法1",nv,ov);
                },
                function(nv,ov){
                    console.log("info监控器方法2",nv,ov);
                }
            ]
        },
        methods: {
            setUser(){
                this.user = {
                    name:"jack",
                    age:23
                }
            }
        },
        
    })
</script>
</html>